// 拖拽源
import React, { Component } from 'react';
import { DragSource } from 'react-dnd';

// 拖动组件定义的一些回调方法
const departmentSource = {
  /**
   * @description: 开始拖拽触发函数
   * @param {*} props
   * @return {*}
   */
  beginDrag(props) {
    return {
      ...props.item,
      type: '1',
    };
  },
};

/**
 * @description: 将dragSource注入到组件中，实现拖拽关键
 * @param {*} connect
 * @return {*}
 */
function collect(connect) {
  return {
    connectDragSource: connect.dragSource(),
  };
}

class SourceItem extends Component {
  render() {
    const { item, connectDragSource } = this.props;
    const style = {
      width: '100%',
      height: 40,
      lineHeight: '40px',
      border: '1px solid red',
      textAlign: 'center',
    };
    return (
      <div>
        名称
        {connectDragSource(<div style={style}>{item.name}</div>)}
      </div>
    );
  }
}

/**
 * DragSource(type, spec, collect)参数介绍
 * type: 拖拽类型，必填
 * spec: 拖拽事件的方法对象，必填
 * collect: 把拖拽过程中需要信息注入组件的 props，接收两个参数 connect and monitor，必填
 */
export default DragSource('box', departmentSource, collect)(SourceItem);
